
<div class="toptitle"><label>标题修改：</label><input type="text" style="width:280px;color:#000000;" class="title_text" id="" value="奔驰M级AMG" name="" /></div>

<div class="tab-title">
	<ul>
		<li id="one1" onmousedown="setContentTab('one',1,2)" class="cur">基本设置</li>
		<li id="one2" onmousedown="setContentTab('one',2,2)">同类替换</li>
	</ul>
</div>
<div class="tab-con" id="con_one_1" style="display:block;">
	<div class="logoupload logoupload2">
		<div class="btnbox">
			<a id="uploadBtnHolder" class="uploadbtn" href="javascript:;">上传替换</a>
		</div>
		<div class="uploadtip">建议上传图片尺寸：<b>640x280</b>像素</div>
		
		<div class="thisway">
			一排：
			<select id="">
                <option value="2">2个</option>
                <option value="3" selected="selected">3个</option>
                <option value="4">4个</option>
                <option value="5">5个</option>
				<option value="6">6个</option>
            </select>
		</div>
		
		<div class="progress-box fl-progress" style="display:none;">
			<div class="progress-num">上传进度：<b>0%</b></div>
			<div class="progress-bar"><div style="width:0%;" class="bar-line"></div></div>
		</div>
		<div class="clear"></div>
	</div>
	<div class="batch-pic" style="height:230px;">
		<ul id="dragmask">
			<li>
				<div class="delete-pic"></div>
				<div class="dragmask"></div>
				<div class="p-pic"><img src="images/car.jpg" /></div>
				<div class="p-des">尺寸：<span>300x200</span>像素</div>
				<div class="p-text"><input type="text" value="图片名称"></div>
				<div class="p-link"><input type="text" value="http://diy.17sucai.com/"></div>
			</li>
			<li>
				<div class="delete-pic"></div>
				<div class="dragmask"></div>
				<div class="p-pic"><img src="images/car.jpg" /></div>
				<div class="p-des">尺寸：<span>300x200</span>像素</div>
				<div class="p-text"><input type="text" value="图片名称"></div>
				<div class="p-link"><input type="text" value="http://diy.17sucai.com/"></div>
			</li>
			<li>
				<div class="delete-pic"></div>
				<div class="dragmask"></div>
				<div class="p-pic"><img src="images/car.jpg" /></div>
				<div class="p-des">尺寸：<span>300x200</span>像素</div>
				<div class="p-text"><input type="text" value="图片名称"></div>
				<div class="p-link"><input type="text" value="http://diy.17sucai.com/"></div>
			</li>
			<li>
				<div class="delete-pic"></div>
				<div class="dragmask"></div>
				<div class="p-pic"><img src="images/car.jpg" /></div>
				<div class="p-des">尺寸：<span>300x200</span>像素</div>
				<div class="p-text"><input type="text" value="图片名称"></div>
				<div class="p-link"><input type="text" value="http://diy.17sucai.com/"></div>
			</li>
			<li>
				<div class="delete-pic"></div>
				<div class="dragmask"></div>
				<div class="p-pic"><img src="images/car.jpg" /></div>
				<div class="p-des">尺寸：<span>300x200</span>像素</div>
				<div class="p-text"><input type="text" value="图片名称"></div>
				<div class="p-link"><input type="text" value="http://diy.17sucai.com/"></div>
			</li>
		</ul>
		
		<!-- 排序保存在这里可以检索服务器上的回传 -->
		<input name="list1SortOrder" type="hidden" />
		
		<div class="clear"></div>
	</div>
	<div class="subbtn">
		<a class="btn-ok" href="javascript:void(0);">保存</a>
		<a class="btn-cancel" href="javascript:;" onclick="closeDialog()">取消</a>
	</div>
</div>

<div class="tab-con" id="con_one_2" style="display:none;">
	<div class="modulebox">
		<ul>
			<li>
				<div class="p-pic"><img src="images/wqe2354.jpg" width="100" /></div>
				<div class="p-text">
					<h3>某某模板的 — <strong>banner</strong></h3>
					<div class="p-btn">
						<a class="graybtn">已经应用</a><a target="_blank" class="btn-ok" href="#">查看效果</a>
					</div>
				</div>
			</li>
			<li>
				<div class="p-pic"><img src="images/wqe2354.jpg" width="100" /></div>
				<div class="p-text">
					<h3>某某模板的 — <strong>banner</strong></h3>
					<div class="p-btn">
						<a class="bluebtn" href="#">添加应用</a><a target="_blank" class="btn-ok" href="#">查看效果</a>
					</div>
				</div>
			</li>
			<li>
				<div class="p-pic"><img src="images/wqe2354.jpg" width="100" /></div>
				<div class="p-text">
					<h3>某某模板的 — <strong>banner</strong></h3>
					<div class="p-btn">
						<a class="bluebtn" href="#">添加应用</a><a target="_blank" class="btn-ok" href="#">查看效果</a>
					</div>
				</div>
			</li>
			<li>
				<div class="p-pic"><img src="images/wqe2354.jpg" width="100" /></div>
				<div class="p-text">
					<h3>某某模板的 — <strong>banner</strong></h3>
					<div class="p-btn">
						<a class="bluebtn" href="#">添加应用</a><a target="_blank" class="btn-ok" href="#">查看效果</a>
					</div>
				</div>
			</li>
			<li>
				<div class="p-pic"><img src="images/wqe2354.jpg" width="100" /></div>
				<div class="p-text">
					<h3>某某模板的 — <strong>banner</strong></h3>
					<div class="p-btn">
						<a class="bluebtn" href="#">添加应用</a><a target="_blank" class="btn-ok" href="#">查看效果</a>
					</div>
				</div>
			</li>
			<li>
				<div class="p-pic"><img src="images/wqe2354.jpg" width="100" /></div>
				<div class="p-text">
					<h3>某某模板的 — <strong>banner</strong></h3>
					<div class="p-btn">
						<a class="bluebtn" href="#">添加应用</a><a target="_blank" class="btn-ok" href="#">查看效果</a>
					</div>
				</div>
			</li>
		</ul>
		
		<div class="clear"></div>
		<div class="pagination_div"></div>
	</div>
</div>

<script type="text/javascript" src="js/colorpicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
	var $targetSel = $("#changebgcolor");
	var getTarget = function() {
		var tarVal = $targetSel.val();
		if(tarVal == 'top') return '#header';
	}
	var $colorPicker = $('#colorpickerHolder').ColorPicker({
		flat:true,
		onChange:function(hsb, hex, rgb) {
			$(getTarget()).css('backgroundColor', '#' + hex);
		}
	});
	$targetSel.change(function() {
		var col = $(getTarget()).css('backgroundColor');
		if(col == 'transparent') col = '#ffffff';
		// ff rgb转换
		if(col.indexOf('rgb') != -1) {
			var _col = col.substring(4, col.length -1);
			var cArr = _col.split(', ');
			col = {
				r: cArr[0],
				g: cArr[1],
				b: cArr[2]
			}
		}
		$('#colorpickerHolder').ColorPickerSetColor(col);
	});
	
	$('.toptitle input').ColorPicker({
		color: '#000000',
		onShow: function (colpkr) {
			$(colpkr).fadeIn(500);
			return false;
		},
		onHide: function (colpkr) {
			$(colpkr).fadeOut(500);
			return false;
		},
		onSubmit: function(hsb, hex, rgb, colpkr) {
			$(colpkr).ColorPickerHide();
		},
		onChange: function (hsb, hex, rgb) {
			$('.toptitle input').css('color', '#' + hex);
			$('.h-sort strong').css('color', '#' + hex);
		}
	});
	
});

$(function(){

	/* 图片垂直居中 */
	$(".batch-pic .p-pic img").resizeImg({
		w:170, //设置图片最大宽度
		h:170 //设置图片最大高度
	});
	
	/* 拖动遮罩层显示 */
	$(".batch-pic li").hoverClass("hover");
	
	/* 拖动排序效果 */
	$("#dragmask").dragsort({
		dragSelector: ".dragmask", 
		dragBetween: true, 
		dragEnd: saveOrder, 
		placeHolderTemplate: "<li class='placeHolder'><div></div></li>",
		scrollSpeed: 5
	});
	function saveOrder() {
		var data = $("#dragmask li").map(function(){
			return
			$(this).children().html();
		}).get();
		$("input[name=list1SortOrder]").val(data.join("|"));
	};

});

function updateProgress(file) {
	$('.progress-box .progress-bar > div').css('width', parseInt(file.percentUploaded) + '%');
	$('.progress-box .progress-num > b').html(SWFUpload.speed.formatPercent(file.percentUploaded));
}

function initProgress() {
	$('.progress-box').show();
	$('.progress-box .progress-bar > div').css('width', '0%');
	$('.progress-box .progress-num > b').html('0%');
}

function successAction(fileInfo) {
	setUploadImage(fileInfo);
	// 如果上传完成了
	$('.progress-box').hide();
}

function setUploadImage(fileInfo) {
	var up_path = fileInfo.path;
	var up_width = fileInfo.width;
	var up_height = fileInfo.height;
	
	var listEls = $('.batch-pic');
	var innerHtml = 
	'<li>'+
		'<div class="delete-pic"></div>'+
		'<div class="dragmask"></div>'+
		'<div class="p-pic"><img src="' + up_path + '" /></div>'+
		'<div class="p-des">尺寸：<span>' + up_width + 'x' + up_height + '</span>像素</div>'+
		'<div class="p-text"><input type="text" value="图片名称" /></div>'+
		'<div class="p-link"><input type="text" value="http://diy.17sucai.com/"></div>'+
	'</li>';
	listEls.find('ul').prepend(innerHtml);
	initImageListFn();
	
	$(".batch-pic .p-pic img").resizeImg({
		w:170, //设置图片最大宽度
		h:170 //设置图片最大高度
	});
}

function initImageListFn() {
	$('.batch-pic').find('ul > li .delete-pic').each(function() {
		$(this).unbind('click').click(function() {
			$(this).parent().remove();
		});
	});
	
	$(".batch-pic li").hoverClass("hover");
	
}

var swfImageUpload;
$(document).ready(function() {
	var settings = {
		flash_url : "js/plugin/swfupload/swfupload.swf",
		flash9_url : "js/plugin/swfupload/swfupload_fp9.swf",
		upload_url: "upload.php",// 接受上传的地址
		file_size_limit : "2 MB",// 文件大小限制
		file_types : "*.jpg;*.gif;*.png;*.jpeg;",// 限制文件类型
		file_types_description : "Image Files",// 说明，自己定义
		file_upload_limit : 100,
		file_queue_limit : 0,
		custom_settings : {},
		debug: false,
		// Button settings
		button_image_url: "js/plugin/swfupload/upload-btn.png",
		button_width: "143",
		button_height: "45 ",
		button_placeholder_id: 'uploadBtnHolder',
		button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,
		button_cursor : SWFUpload.CURSOR.HAND,
		button_action: SWFUpload.BUTTON_ACTION.SELECT_FILE,
		
		moving_average_history_size: 40,
		
		// The event handler functions are defined in handlers.js
		swfupload_preload_handler : preLoad,
		swfupload_load_failed_handler : loadFailed,
		file_queued_handler : fileQueued,
		file_dialog_complete_handler: fileDialogComplete,
		upload_start_handler : function (file) {
			initProgress();
			updateProgress(file);
		},
		upload_progress_handler : function(file, bytesComplete, bytesTotal) {
			updateProgress(file);
		},
		upload_success_handler : function(file, data, response) {
			// 上传成功后处理函数
			var fileInfo = eval("(" + data + ")");
			successAction(fileInfo);
		},
		upload_error_handler : function(file, errorCode, message) {
			alert('上传发生了错误！');
		},
		file_queue_error_handler : function(file, errorCode, message) {
			if(errorCode == -110) {
				alert('您选择的文件太大了。');	
			}
		}
	};
	swfImageUpload = new SWFUpload(settings);
	initImageListFn();
});
</script>

<script type="text/javascript">
MyPagination.init({
	renderer: '#con_one_2 .pagination_div',
	ajaxOpts: {
		url: 'ajax/banner.json',
		type: 'get',
		dataType: 'json',
		params: {}
	},
	handleOpts: {
		// 数据获取之后的操作
		formatValues: function(data) {
			var listEls = $('#con_one_2 .modulebox > ul');
			listEls.empty(); // 清空
			$.each(data, function(index, value) {
				var innerHmtl = 
					'<li>'+
						'<div class="p-pic"><img src="' + value.pic + '" width="100" /></div>'+
						'<div class="p-text">'+
							'<h3>' + value.ower + ' — <strong>banner</strong></h3>'+
							'<div class="p-btn">'+
								'<a class="bluebtn" href="#">添加应用</a><a target="_blank" class="btn-ok" href="#">查看效果</a>'+
							'</div>'+
						'</div>'+
					'</li>';
				listEls.append(innerHmtl);
			});
		}
	},
	pageOpts: {
		num_edge_entries: 3, // 前后显示的个数
		num_display_entries: 3, // 显示数
		items_per_page: 2 // 每页显示多少条
	}
});
</script>